<template>
  <div class="padding-left-right-20 padding-top-10 relative-box">
    <option-list ref="option"></option-list>

    <form-common class="margin-top-10" :filed-list="searchContractCurrentList" ref="form" @selectChange="selectChange"></form-common>
    <div class="fill-box margin-bottom-10">
      <el-button type="primary" size="large" class="f-right margin-left-10 z-index-99" @click="searchFn">查询</el-button>
      <el-button size="large" class="f-right z-index-99" @click="resetFn">重置</el-button>
    </div>

    <section class="search-result-box flex align-center font-size-14 padding-top-20 padding-bottom-20 color-666666">
      <div class="total-num-box margin-right-20 font-size-16">
        共<span class="margin-right-5 margin-left-5 color-3384FE">{{ total }}</span
        >条
      </div>
      <div class="flex-1 text-align-right">搜索结果</div>
    </section>

    <el-table :border="false" stripe :data="tableData" class="new-table-style" @row-click="goInfo" v-if="tableData && tableData.length">
      <el-table-column align="left" label="合同名称" prop="contractName"> </el-table-column>

      <el-table-column align="left" label="资产/事项">
        <template slot-scope="scope">
          <span>{{ scope.row.assetName }}</span
          ><br />
          <span v-if="scope.row.leaserShopName">{{ scope.row.leaserShopName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="left" label="签署方" prop="partnerName"> </el-table-column>
      <el-table-column align="left" label="到期时间" width="160">
        <template slot-scope="scope">
          <span>{{ scope.row.contractEndDate | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="更新时间" width="160">
        <template slot-scope="scope">
          <span>{{ scope.row.updateTime | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="合同状态" prop="overdueNum" width="100">
        <template slot-scope="scope">
          <span>{{ getStatusName(scope.row.contractStatus) }}</span>
        </template>
      </el-table-column>
    </el-table>

    <Pagination v-if="total" @change="pageChange" :total="total" :current-page="currentPage" paginationLayout="total, prev, pager, next" />

    <el-dialog title="起草" :visible.sync="statusDialog" width="860px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="bg-contract" :class="statusCurrentKey == item.dictKey ? 'activity-chose' : ''" v-for="(item, index) in contractTypeOptionList" :key="index" @click="statusCurrentKey = item.dictKey">{{ item.dictValue }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="statusDialog = false">取消</el-button>
        <el-button size="small" type="primary" @click="confirmDialog">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { searchContractCurrentList } from '../contract/contractManage/form.js';
  import formCommon from '@g/components/form/formCommon.vue';
  import { apiConstant } from '@a/index';
  import { apiMyContract, apiCategoryList, apiAssetCodeList, apiDictMoreList } from '../../api/contract';
  import optionList from './components/optionList';
  import workTrace from '../../mixin/workTrace';

  export default {
    mixins: [workTrace],

    name: 'current',
    data() {
      return {
        tableData: [],
        searchContractCurrentList: searchContractCurrentList,
        statusList: [
          {
            dictKey: '0',
            dictValue: '草稿',
          },
          {
            dictKey: 1,
            dictValue: '审批中',
          },
          {
            dictKey: 2,
            dictValue: '履行中',
          },
          {
            dictKey: 3,
            dictValue: '驳回',
          },
          {
            dictKey: 4,
            dictValue: '履行完毕',
          },
          {
            dictKey: 5,
            dictValue: '已废止',
          },
        ],
        total: 0,
        currentPage: 1,
        pageSize: 10,
        projectKey: localStorage.getItem('projectKey'),
        userInfo: JSON.parse(localStorage.getItem('userInfo')),
        statusDialog: false,
        contractTypeOptionList: [],
        statusCurrentKey: '',
      };
    },
    mounted() {
      this.getOptionList();
      this.getConstant();
      this.getCategoryList();
    },
    methods: {
      async getDataSource() {
        let searchParam = this.$refs.form.validateForm();
        let res = await apiMyContract({
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          createUser: this.userInfo.key,
          ...searchParam,
        });
        this.tableData = res.rows || [];
        this.total = res.total || 0;
      },

      //资产类型
      async getConstant() {
        let res = await apiConstant();
        this.searchContractCurrentList.forEach(item => {
          if (item.bindFieldName == 'assetTypeList') {
            item.optionList = res.spaceAssetType;
          }
        });
      },

      //资产
      async getAssetList(spaceTypeList) {
        let res = await apiAssetCodeList({
          projectKeys: this.projectKey ? [this.projectKey] : null,
          spaceTypeList: spaceTypeList,
        });
        this.searchContractCurrentList.forEach(item => {
          if (item.bindFieldName == 'assetCodeList') {
            item.optionList = res.rows || [];
          }
        });
      },

      //品牌
      async getCategoryList() {
        let res = await apiCategoryList({
          bizId: 'commercial_rent_main_data',
          bizType: 'commercial_rent_main_data',
          status: 1,
          catalogTypeList: ['brand_child'],
        });
        this.searchContractCurrentList.forEach(item => {
          if (item.bindFieldName == 'operateBrandList') {
            item.optionList = res.rows || [];
          }
        });
      },

      //合同状态
      getStatusName(value) {
        let [obj] = this.statusList.filter(item => item.dictKey == value);
        return obj ? obj.dictValue : '';
      },

      //详情
      goInfo(row) {
        let param = {
          contractType: row.contractType,
          contractKey: row.primaryKey,
          contractCategory: row.contractCategory,
          processWorkId: row.workId,
          contractCode: row.contractCode,
        };
        let pathName = !row.contractStatus || row.contractStatus == 1 ? 'contract-create' : 'contract-info';
        let pathUrl = {
          name: pathName,
          query: param,
        };
        let { href } = this.$router.resolve(pathUrl);
        let windowName = 'contractManageToInfo';
        window.open(href, windowName);
      },

      //字典
      async getOptionList() {
        let res = await apiDictMoreList({
          dictTypeList: ['contractType', 'space_type'],
        });
        res.rows.forEach(item => {
          if (item.dictType == 'contractType') {
            this.contractTypeOptionList = item.dictList || [];
          }
        });
      },

      selectChange(data) {
        if (data.filedName == 'assetTypeList') {
          this.getAssetList(data.filedVal);
        }
      },

      resetFn() {
        this.$refs.form.clearValidateForm();
        this.currentPage = 1;
        this.getDataSource();
      },

      //查询
      searchFn() {
        this.currentPage = 1;
        this.getDataSource();
      },

      //分页
      pageChange(page) {
        this.currentPage = page.currentPage;
        this.getDataSource();
      },

      confirmDialog() {
        let target = this.contractTypeOptionList.find(item => item.dictKey == this.statusCurrentKey);
        let pathUrl = {
          name: 'contract-create',
          query: {
            contractType: this.statusCurrentKey,
          },
        };
        if (target) pathUrl.query.contractCategory = target.bizType;
        let { href } = this.$router.resolve(pathUrl);
        window.open(href);
      },
    },
    components: { formCommon, optionList },
  };
</script>

<style lang="scss" scoped>
  .search-result-box {
    border-top: 1px solid #e5e5e5;
  }

  .z-index-99 {
    z-index: 99;
  }

  ::v-deep .el-table__row {
    cursor: pointer;
  }

  ::v-deep .el-dialog__body {
    overflow: hidden;
  }

  .bg-contract {
    width: 185px;
    padding: 10px 15px;
    border: 1px solid #f1f1f1;
    text-align: center;
    margin: 0 10px 15px 10px;
    float: left;
    cursor: pointer;
  }
  .activity-chose {
    color: #fff;
    background: #409eff;
    border: 1px solid #409eff;
  }
</style>
